<template>
  <div class="order-center-optimized order-center-fixed-layout">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon orders-icon">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">今日订单</div>
            <div class="stat-value">{{ total }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon revenue-icon">
            <el-icon><Money /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">今日营收</div>
            <div class="stat-value">¥{{ todayRevenue }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="stat-card" shadow="hover">
        <div class="stat-content">
          <div class="stat-icon discount-icon">
            <el-icon><Discount /></el-icon>
          </div>
          <div class="stat-info">
            <div class="stat-label">优惠金额</div>
            <div class="stat-value">¥{{ todayDiscount }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 搜索栏 -->
    <el-card class="search-card" shadow="never">
      <el-form :model="queryParams" ref="queryRef" :inline="true" class="search-form-optimized">
        <el-form-item label="结账日期" prop="checkoutDate">
          <el-date-picker
            v-model="queryParams.checkoutDate"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
            :clearable="true"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="订单号" prop="orderNumber">
          <el-input
            v-model="queryParams.orderNumber"
            placeholder="请输入订单号"
            clearable
            prefix-icon="Search"
            style="width: 220px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="餐台号" prop="tableNumber">
          <el-input
            v-model="queryParams.tableNumber"
            placeholder="请输入餐台号"
            clearable
            prefix-icon="Grid"
            style="width: 180px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 订单列表 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">
            <el-icon><List /></el-icon>
            订单列表
          </span>
        </div>
      </template>
      <el-table
        v-loading="loading"
        :data="orderList"
        class="order-table-optimized"
        @row-click="handleRowClick"
        :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '600'}"
      >
        <el-table-column label="订单号" prop="orderNumber" min-width="180" align="center">
          <template #default="scope">
            <div class="order-number">
              <el-icon class="order-icon"><Tickets /></el-icon>
              {{ scope.row.orderNumber }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="餐台号" prop="tableNumber" width="100" align="center">
          <template #default="scope">
            <el-tag type="primary" effect="plain">{{ scope.row.tableNumber }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="服务员" prop="waiterName" width="100" align="center">
          <template #default="scope">
            <div class="waiter-name">
              <el-icon><User /></el-icon>
              {{ scope.row.waiterName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="就餐人数" prop="guestCount" width="100" align="center">
          <template #default="scope">
            <el-tag type="success" effect="plain">{{ scope.row.guestCount }}人</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="开台时间" prop="openTime" width="160" align="center">
          <template #default="scope">
            <div class="time-text">
              <el-icon><Clock /></el-icon>
              {{ scope.row.openTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="结账时间" prop="checkoutTime" width="160" align="center">
          <template #default="scope">
            <div class="time-text">
              <el-icon><Clock /></el-icon>
              {{ scope.row.checkoutTime }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="原始金额" prop="originalAmount" width="120" align="center">
          <template #default="scope">
            <div class="amount-original">¥{{ scope.row.originalAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="优惠金额" prop="discountAmount" width="120" align="center">
          <template #default="scope">
            <div class="amount-discount">-¥{{ scope.row.discountAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="实收金额" prop="actualAmount" width="130" align="center">
          <template #default="scope">
            <div class="amount-actual">¥{{ scope.row.actualAmount }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click.stop="handleViewDetail(scope.row)">
              <el-icon><View /></el-icon>
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 订单详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      width="900px"
      top="3vh"
      :close-on-click-modal="false"
      class="order-detail-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <el-icon class="header-icon"><Document /></el-icon>
          <span class="header-title">订单详情</span>
        </div>
      </template>

      <div v-if="orderDetail" class="order-detail-optimized">
        <!-- 订单基本信息卡片 -->
        <el-card class="info-card" shadow="never">
          <template #header>
            <div class="section-header">
              <el-icon><InfoFilled /></el-icon>
              <span>订单信息</span>
            </div>
          </template>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="订单号" label-class-name="desc-label">
              <span class="order-num-detail">{{ orderDetail.orderNumber }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="餐台号" label-class-name="desc-label">
              <el-tag type="primary" size="large">{{ orderDetail.tableNumber }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="服务员" label-class-name="desc-label">
              <span class="waiter-detail">
                <el-icon><User /></el-icon>
                {{ orderDetail.waiterName }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="就餐人数" label-class-name="desc-label">
              <el-tag type="success" size="large">{{ orderDetail.guestCount }}人</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="开台时间" label-class-name="desc-label">
              <span class="time-detail">
                <el-icon><Clock /></el-icon>
                {{ orderDetail.openTime }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="结账时间" label-class-name="desc-label">
              <span class="time-detail">
                <el-icon><Clock /></el-icon>
                {{ orderDetail.checkoutTime }}
              </span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <!-- 订单明细卡片 -->
        <el-card class="items-card" shadow="never">
          <template #header>
            <div class="section-header">
              <el-icon><List /></el-icon>
              <span>订单明细</span>
            </div>
          </template>
          <el-table
            :data="orderDetail.orderDetails"
            class="detail-table"
            :header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '600'}"
          >
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column label="菜品名称" prop="menuName" align="center">
              <template #default="scope">
                <div class="menu-name-cell">
                  <el-icon class="menu-icon"><Food /></el-icon>
                  {{ scope.row.menuName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" width="150" align="center">
              <template #default="scope">
                <span class="price-cell">¥{{ scope.row.price }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="quantity" width="120" align="center">
              <template #default="scope">
                <el-tag type="info" effect="plain">x{{ scope.row.quantity }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="小计" prop="subtotal" width="150" align="center">
              <template #default="scope">
                <span class="subtotal-cell">¥{{ scope.row.subtotal }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- 金额汇总卡片 -->
        <el-card class="summary-card" shadow="never">
          <template #header>
            <div class="section-header">
              <el-icon><Money /></el-icon>
              <span>金额汇总</span>
            </div>
          </template>
          <div class="amount-summary-optimized">
            <div class="summary-row-inline">
              <div class="summary-item">
                <span class="summary-label">原始金额：</span>
                <span class="summary-value original">¥{{ orderDetail.originalAmount }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">优惠金额：</span>
                <span class="summary-value discount">-¥{{ orderDetail.discountAmount }}</span>
              </div>
              <div class="summary-item actual-item">
                <span class="summary-label">实收金额：</span>
                <span class="summary-value actual">¥{{ orderDetail.actualAmount }}</span>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <template #footer>
        <el-button  size="large" @click="handlePrint">
          <el-icon><Printer /></el-icon>
          打印
        </el-button>
        <el-button size="large"  icon="close" type="primary" @click="detailDialogVisible = false">关闭</el-button>

      </template>
    </el-dialog>
  </div>
</template>

<script setup name="OrderCenter">
import { ref, reactive, onMounted, computed } from 'vue';
import { getCheckedOutOrders, getOrderDetail } from '@/api/restaurant/order.js';
import { ElMessage } from 'element-plus';

const { proxy } = getCurrentInstance();

// 数据
const loading = ref(false);
const orderList = ref([]);
const total = ref(0);
const detailDialogVisible = ref(false);
const orderDetail = ref(null);

// 查询参数
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  checkoutDate: new Date().toISOString().split('T')[0], // 默认今天
  orderNumber: undefined,
  tableNumber: undefined
});

// 计算今日营收
const todayRevenue = computed(() => {
  return orderList.value.reduce((sum, order) => {
    return sum + (parseFloat(order.actualAmount) || 0);
  }, 0).toFixed(2);
});

// 计算今日优惠
const todayDiscount = computed(() => {
  return orderList.value.reduce((sum, order) => {
    return sum + (parseFloat(order.discountAmount) || 0);
  }, 0).toFixed(2);
});

// 获取订单列表
const getList = async () => {
  loading.value = true;
  try {
    const params = {
      pageNum: queryParams.pageNum,
      pageSize: queryParams.pageSize
    };

    // 添加查询条件
    if (queryParams.checkoutDate) {
      params.params = {
        beginTime: queryParams.checkoutDate + ' 00:00:00',
        endTime: queryParams.checkoutDate + ' 23:59:59'
      };
    }
    if (queryParams.orderNumber) {
      params.orderNumber = queryParams.orderNumber;
    }
    if (queryParams.tableNumber) {
      params.tableNumber = queryParams.tableNumber;
    }

    const response = await getCheckedOutOrders(params);
    orderList.value = response.rows;
    total.value = response.total;
  } catch (error) {
    ElMessage.error('获取订单列表失败');
  } finally {
    loading.value = false;
  }
};

// 搜索
const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

// 重置
const resetQuery = () => {
  queryParams.checkoutDate = new Date().toISOString().split('T')[0];
  queryParams.orderNumber = undefined;
  queryParams.tableNumber = undefined;
  handleQuery();
};

// 查看详情
const handleViewDetail = async (row) => {
  try {
    const response = await getOrderDetail(row.id);
    orderDetail.value = response.data;
    detailDialogVisible.value = true;
  } catch (error) {
    ElMessage.error('获取订单详情失败');
  }
};

// 行点击事件
const handleRowClick = (row) => {
  handleViewDetail(row);
};

// 打印订单
const handlePrint = () => {
  ElMessage.success('打印功能开发中...');
};

// 初始化
onMounted(() => {
  getList();
});
</script>

<style scoped lang="scss">
.order-center-optimized {
  padding: 20px;
  background: #f0f2f5;
  min-height: calc(100vh - 84px);

  // 统计卡片
  .stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;

    .stat-card {
      border-radius: 12px;
      border: none;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }

      :deep(.el-card__body) {
        padding: 24px;
      }

      .stat-content {
        display: flex;
        align-items: center;
        gap: 20px;

        .stat-icon {
          width: 64px;
          height: 64px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 32px;
          color: #fff;

          &.orders-icon {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          }

          &.revenue-icon {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
          }

          &.discount-icon {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          }
        }

        .stat-info {
          flex: 1;

          .stat-label {
            font-size: 14px;
            color: #909399;
            margin-bottom: 8px;
          }

          .stat-value {
            font-size: 28px;
            font-weight: 700;
            color: #303133;
            line-height: 1;
          }
        }
      }
    }
  }

  // 搜索卡片
  .search-card {
    margin-bottom: 20px;
    border-radius: 12px;
    border: none;

    :deep(.el-card__body) {
      padding: 20px;
    }

    .search-form-optimized {
      margin: 0;

      .el-form-item {
        margin-bottom: 0;
      }
    }
  }

  // 表格卡片
  .table-card {
    border-radius: 12px;
    border: none;

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .card-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;

        .el-icon {
          font-size: 20px;
          color: #409eff;
        }
      }
    }

    :deep(.el-card__body) {
      padding: 0;
    }

    .order-table-optimized {
      cursor: pointer;

      :deep(.el-table__row) {
        transition: all 0.3s ease;

        &:hover {
          background-color: #f5f7fa !important;
          transform: scale(1.001);
        }
      }

      .order-number {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-weight: 600;
        color: #409eff;

        .order-icon {
          font-size: 16px;
        }
      }

      .waiter-name {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #606266;
      }

      .time-text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        font-size: 13px;
        color: #909399;
      }

      .amount-original {
        font-size: 15px;
        font-weight: 600;
        color: #606266;
      }

      .amount-discount {
        font-size: 15px;
        font-weight: 600;
        color: #e6a23c;
      }

      .amount-actual {
        font-size: 16px;
        font-weight: 700;
        color: #f56c6c;
        background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
        padding: 6px 12px;
        border-radius: 6px;
        display: inline-block;
      }
    }
  }

  // 订单详情对话框
  :deep(.order-detail-dialog) {
    .el-dialog__header {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 16px 20px;
      margin: 0;

      .dialog-header {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;

        .header-icon {
          font-size: 20px;
        }

        .header-title {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .el-dialog__headerbtn {
        top: 16px;
        right: 20px;
        width: 32px;
        height: 32px;

        .el-dialog__close {
          color: #fff;
          font-size: 18px;
          font-weight: bold;

          &:hover {
            color: #fff;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
          }
        }
      }
    }

    .el-dialog__body {
      padding: 16px;
      background: #f5f7fa;
      //overflow: hidden;
      max-height: 75vh;
    }

    .el-dialog__footer {
      padding: 12px 20px;
      border-top: 1px solid #e4e7ed;
    }
  }

  .order-detail-optimized {
    .section-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: 600;
      color: #303133;

      .el-icon {
        font-size: 18px;
        color: #409eff;
      }
    }

    .info-card,
    .items-card,
    .summary-card {
      margin-bottom: 12px;
      border-radius: 8px;
      border: none;

      &:last-child {
        margin-bottom: 0;
      }

      :deep(.el-card__header) {
        background: #fff;
        border-bottom: 1px solid #f0f2f5;
        padding: 10px 16px;
      }

      :deep(.el-card__body) {
        padding: 12px;
      }
    }

    .info-card {
      :deep(.el-descriptions__label) {
        font-weight: 600;
        color: #606266;
        background: #fafafa;
      }

      .order-num-detail {
        font-weight: 600;
        color: #409eff;
        font-size: 15px;
      }

      .waiter-detail,
      .time-detail {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #606266;

        .el-icon {
          color: #909399;
        }
      }
    }

    .items-card {
      :deep(.el-card__body) {
        padding: 0;
      }

      .detail-table {
        max-height: 220px;
        overflow-y: auto;

        .menu-name-cell {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          font-weight: 500;

          .menu-icon {
            color: #67c23a;
            font-size: 18px;
          }
        }

        .price-cell {
          font-size: 15px;
          font-weight: 600;
          color: #606266;
        }

        .subtotal-cell {
          font-size: 15px;
          font-weight: 700;
          color: #f56c6c;
        }
      }
    }

    .summary-card {
      background: linear-gradient(135deg, #fff 0%, #f9f9f9 100%);

      :deep(.el-card__body) {
        padding: 12px;
      }

      .amount-summary-optimized {
        .summary-row-inline {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 12px;
          padding: 12px;
          background: #fff;
          border-radius: 8px;

          .summary-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            padding: 10px;
            background: #f5f7fa;
            border-radius: 6px;

            &.actual-item {
              background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
              border: 2px solid #f56c6c;
            }

            .summary-label {
              font-size: 12px;
              font-weight: 600;
              color: #909399;
            }

            .summary-value {
              font-size: 18px;
              font-weight: 700;

              &.original {
                color: #606266;
              }

              &.discount {
                color: #e6a23c;
              }

              &.actual {
                color: #f56c6c;
                font-size: 22px;
              }
            }
          }
        }
      }
    }
  }
}

// ==================== 响应式适配 ====================

// 全局防止横向滚动条
* {
  box-sizing: border-box;
}

// 固定布局 - 面包屑不滚动
.order-center-fixed-layout {
  position: relative;
  height: calc(100vh - 84px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .stats-cards,
  .search-card {
    flex-shrink: 0;
  }

  .table-card {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    :deep(.el-card__body) {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .order-table-optimized {
      flex: 1;
      overflow-y: auto;
    }

    .pagination {
      flex-shrink: 0;
      padding: 12px 0;
    }
  }
}

.order-center-optimized {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

// iPad 和平板端适配 (768px - 1024px)
@media screen and (min-width: 768px) and (max-width: 1024px) {
  // 防止横向滚动
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  .order-center-optimized {
    padding: 12px;
    overflow-x: hidden !important;

    // 统计卡片iPad适配
    .stats-cards {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;

      .stat-card {
        .stat-content {
          .stat-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
          }

          .stat-info {
            .stat-label {
              font-size: 13px;
            }

            .stat-value {
              font-size: 20px;
            }
          }
        }
      }
    }

    // 搜索表单iPad适配
    .search-card {
      margin-top: 10px;

      .search-form-optimized {
        :deep(.el-form-item) {
          margin-right: 10px;

          .el-date-picker,
          .el-input {
            width: 160px !important;
          }
        }
      }
    }

    // 订单列表iPad适配
    .table-card {
      margin-top: 10px;
      overflow-x: hidden !important;

      .order-table-optimized {
        :deep(.el-table) {
          font-size: 13px;

          .el-table__body-wrapper {
            overflow-x: hidden !important;
          }

          .el-table__header th {
            padding: 9px 0;
          }

          .el-table__body td {
            padding: 9px 0;
          }
        }
      }
    }
  }

  // 订单详情对话框iPad适配 - 关键优化
  :deep(.order-detail-dialog) {
    width: 90vw !important;
    max-width: 90vw !important;
    margin: 3vh auto !important;

    .el-dialog__header {
      padding: 12px 16px;

      .dialog-header-custom {
        .header-icon-custom {
          font-size: 18px;
        }

        .header-title-custom {
          font-size: 15px;
        }
      }

      .el-dialog__headerbtn {
        top: 12px;
        right: 16px;
      }
    }

    .el-dialog__body {
      padding: 12px 16px;
      max-height: 70vh !important;
      overflow-y: auto;
      overflow-x: hidden !important;
    }

    .el-dialog__footer {
      padding: 10px 16px;
    }

    // 基本信息卡片
    .info-card {
      margin-bottom: 10px;
      overflow: hidden;

      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px 12px;
        overflow-x: hidden !important;

        :deep(.el-descriptions) {
          .el-descriptions__label {
            font-size: 12px;
            padding: 8px;
            word-break: break-all;
          }

          .el-descriptions__content {
            font-size: 12px;
            padding: 8px;
            word-break: break-all;
          }
        }
      }
    }

    // 订单明细卡片
    .items-card {
      margin-bottom: 10px;
      overflow: hidden;

      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px 12px;
        overflow-x: hidden !important;

        .detail-table {
          max-height: 280px !important;
          overflow-x: hidden !important;

          :deep(.el-table) {
            font-size: 12px;

            .el-table__body-wrapper {
              overflow-x: hidden !important;
            }

            .el-table__header th {
              padding: 7px 0;
              font-size: 12px;
            }

            .el-table__body td {
              padding: 7px 0;
              font-size: 12px;
            }

            // 优化表格列宽
            .el-table__body td:nth-child(1),
            .el-table__header th:nth-child(1) {
              min-width: 100px !important;
            }

            .el-table__body td:nth-child(2),
            .el-table__header th:nth-child(2) {
              width: 70px !important;
              min-width: 70px !important;
            }

            .el-table__body td:nth-child(3),
            .el-table__header th:nth-child(3) {
              width: 60px !important;
              min-width: 60px !important;
            }

            .el-table__body td:nth-child(4),
            .el-table__header th:nth-child(4) {
              width: 75px !important;
              min-width: 75px !important;
            }

            .el-tag {
              font-size: 10px;
              padding: 0 4px;
              height: 18px;
              line-height: 18px;
            }
          }
        }
      }
    }

    // 金额汇总卡片
    .summary-card {
      overflow: hidden;

      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px 12px;
        overflow-x: hidden !important;

        .summary-row-inline {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          gap: 12px;
          flex-wrap: nowrap;

          .summary-item {
            flex: 1;
            min-width: 0;

            .summary-label {
              font-size: 12px;
              white-space: nowrap;
            }

            .summary-value {
              font-size: 16px;
              word-break: break-all;

              &.original {
                font-size: 16px;
              }

              &.discount {
                font-size: 16px;
              }

              &.actual {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}

// 手机端适配 (< 600px)
@media screen and (max-width: 599px) {
  .order-center-optimized {
    padding: 10px;

    // 统计卡片移动端适配
    .stats-cards {
      grid-template-columns: 1fr;
      gap: 10px;

      .stat-card {
        .stat-content {
          .stat-icon {
            width: 50px;
            height: 50px;
            font-size: 24px;
          }

          .stat-info {
            .stat-label {
              font-size: 13px;
            }

            .stat-value {
              font-size: 20px;
            }
          }
        }
      }
    }

    // 搜索表单移动端适配
    .search-card {
      margin-top: 10px;

      .search-form-optimized {
        :deep(.el-form-item) {
          display: block;
          margin-right: 0;
          margin-bottom: 12px;

          .el-form-item__label {
            display: block;
            text-align: left;
            margin-bottom: 4px;
          }

          .el-form-item__content {
            margin-left: 0 !important;

            .el-date-picker,
            .el-input {
              width: 100% !important;
            }
          }

          &:last-child {
            .el-form-item__content {
              display: flex;
              gap: 8px;

              .el-button {
                flex: 1;
              }
            }
          }
        }
      }
    }

    // 订单列表移动端适配
    .table-card {
      margin-top: 10px;

      .card-header {
        .card-title {
          font-size: 14px;
        }
      }

      .order-table-optimized {
        :deep(.el-table) {
          font-size: 12px;

          .el-table__header th {
            padding: 8px 0;
            font-size: 12px;
          }

          .el-table__body td {
            padding: 8px 0;
            font-size: 12px;
          }

          // 隐藏部分列以适应小屏幕
          .el-table-column--selection,
          .el-table__column:nth-child(4), // 服务员
          .el-table__column:nth-child(5)  // 就餐人数
          {
            display: none;
          }
        }
      }
    }

    // 分页移动端适配
    :deep(.el-pagination) {
      justify-content: center;
      flex-wrap: wrap;
      padding: 10px 0;

      .el-pagination__sizes {
        margin: 0 0 8px 0;
      }

      .el-pagination__jump {
        margin-left: 0;
        margin-top: 8px;
      }
    }
  }

  // 订单详情对话框移动端适配
  :deep(.order-detail-dialog) {
    width: 95% !important;
    margin: 10px auto !important;

    .el-dialog__header {
      padding: 12px 16px;

      .dialog-header-custom {
        .header-icon-custom {
          font-size: 18px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .el-dialog__headerbtn {
        top: 12px;
        right: 16px;
        width: 28px;
        height: 28px;

        .el-dialog__close {
          font-size: 16px;
        }
      }
    }

    .el-dialog__body {
      padding: 12px;
      max-height: calc(100vh - 120px) !important;
      overflow-y: auto;
    }

    .el-dialog__footer {
      padding: 10px 16px;

      .el-button {
        padding: 8px 16px;
        font-size: 13px;
      }
    }

    // 基本信息卡片
    .info-card {
      margin-bottom: 10px;

      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px;

        :deep(.el-descriptions) {
          .el-descriptions__label {
            font-size: 12px;
            padding: 6px;
          }

          .el-descriptions__content {
            font-size: 12px;
            padding: 6px;
          }
        }
      }
    }

    // 订单明细卡片
    .items-card {
      margin-bottom: 10px;

      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px;

        .detail-table {
          max-height: 200px !important;

          :deep(.el-table) {
            font-size: 12px;

            .el-table__header th {
              padding: 6px 0;
              font-size: 12px;
            }

            .el-table__body td {
              padding: 6px 0;
              font-size: 12px;
            }

            .el-tag {
              font-size: 10px;
              padding: 0 4px;
              height: 18px;
              line-height: 18px;
            }
          }
        }
      }
    }

    // 金额汇总卡片
    .summary-card {
      .card-header-custom {
        padding: 8px 12px;

        .header-icon-custom {
          font-size: 16px;
        }

        .header-title-custom {
          font-size: 14px;
        }
      }

      .card-body-custom {
        padding: 10px;

        .summary-row-inline {
          flex-direction: column;
          gap: 8px;

          .summary-item {
            .summary-label {
              font-size: 12px;
            }

            .summary-value {
              font-size: 16px;

              &.original {
                font-size: 16px;
              }

              &.discount {
                font-size: 16px;
              }

              &.actual {
                font-size: 18px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
